سون لرن • آموزش

آخرین مطالب

امکانات وب

واکنشگرا کردن تصاویر (جلسه 16) : تعاریف - Image Breakpoint - قسمت چهارم

0 5 ۲۹ اردیبهشت ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.

انتخاب Breakpoint بر اساس بودجه Performance و کارایی

چی میشه اگه ما ایده بودجه Performance رو در واکنشگرا کردن تصاویر مورد استفاده قرار بدیم؟ چطوری میشه اون رو تفسیر کرد؟

ما با تعریف کردن یک بودجه برای مقدار بایت اضافی که مرورگر اجازه داره تصویر مورد نظر رو دانلود کنه و در صفحه نشون بده، شروع میکنیم. مثلا ما تصمیم میگیریم که 20 کیلوبایت برای بودجه واکنشگرا کردن هر تصویر قرار بدیم. این موضوع به این معنی هست که ما حق نداریم برای هیچ کدام از منابع تصاویرمون، تصویری رو انتخاب کنیم که از این مقدار بودجه، بایتهای اضافی بیشتری رو دانلود کنه.

زمانی که ما اینکار رو انجام دادیم، ما تعداد تغییرات Image Breakpoint ها رو بر پایه تنوع و گوناگونی نمایشی پیدا میکنیم. بیاید تعدادی مثال رو با هم بررسی کنیم.

تصویر Tim Square : دارای 8 Image Breakpoint

times-square

این تصویر پیچیده هست و تنوع نمایشی زیادی داره. این تنوع و گوناگونی رنگها و الگوها به ما میفهمونه که فشرده کردن این تصویر JPEG باعث افت کیفیت تصویر میشه و به زیبایی اون صدمه میزنه. به این دلیل از 8 Image Breakpoint برای این تصویر استفاده میکنیم که دامنه تغییر حجم اونا تقریبا 20 کیلوبایت هست. جدولی از سایز و حجم اونا رو در زیر ببینید:

شماره Breakpoint	Width	Height	File Size
1	320	213	25K
2	453	302	44K
3	579	386	65K
4	687	458	85K
5	786	524	104K
6	885	590	124K
7	975	650	142K
8	990	660	151K

تصویر Moing in Kettering : دارای 3 Image Breakpoint

kettering-sky

برخلاف تصویر قبلی، این تصویر دارای سطح زیادی با رنگها مشابه هست و تنوع زیادی نداره، به همین دلیل این تصویر میتونه بهتر و بیشتر فشرده بشه و سایزش کاهش پیدا کنه. بدلیل اینکه تصویرمون بهتر و بیشتر میتونه فشرده بشه، بودجه مورد نظر هم متناسب با اون تغییر میکنه و کاهش داده میشه. ما برای این تصویر سه Image Breakpoint در نظر میگیریم.

تعداد Breakpoint	Width	Height	File Size
1	320	213	9.0K
2	731	487	29K
3	990	660	40K

تصویر لوگوی Microsoft : دارای 1 Image Breakpoint

Microsoft_Logo

این تصویر یک تصویر PNG ساده هست. در سایز بزرگ یا 660*990، این تصویر فقط 13 کیلوبایت حجم داره بهمین دلیل که برای بودجمون هم صدق میکنه، نیازی به Breakpoint های بیشتری نیس و یکی کفایت میکنه.

تعداد Breakpoint	Width	Height	File Size
1	990	660	13K

میتونین برای دیدن مثالهای بیشتر به اینجا برید. با دیدن این تصاویر بیشتر با این موضوع و عنوان آشنا میشید.

باید اینو بگیم که پیشنهاد نمیشه که برای تک تک تصاویری که وجود داره این کار رو بصورت دستی انجام بدین. شاید در آینده راهی به وجود بیاد که با وارد کردن بودجه در سرور، خود سرور بیاد و متناسب با تصویر تعداد Image Breakpoint ها رو مشخص کنه و اونا رو تهیه کنه و برای مرورگر بفرسته. در این لینک میتونین بیشتر در مورد بودجه کارایی بخونید.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 425 تاريخ: جمعه 31 ارديبهشت 1395 ساعت: 0:53

واکنشگرا کردن تصاویر (جلسه 15) : تعاریف - Image Breakpoint - قسمت سوم

0 3 ۲۸ اردیبهشت ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.

به چه دلیل سایز دقیق تصویر رو محیا نمیکنیم؟

در این لحظه شاید به نظرتون برسه و با خودتون بگید که چرا از همون سایزی که قرار هست در صفحه نمایش داده بشه استفاده نمیکنیم و خودمون رو راحت کنیم؟!

نخست باید بگیم که تصاویر flexible و انعطاف پذیر در طراحی واکنشگرا با هر تغییر سایز viewport، سایزشون تغییر میکنه. اما اگر ما دقیقا از سایز تصویری که در صفحه قرار است نمایش داده بشه استفاده کنیم، به احتمال زیاد برای هر تغییر سایز viewport یا چرخش صفحه، باید یک منبع تصویر جدید با سایز متفاوت رو لود کرده و نمایش بدیم. بعد از اون اگه دقت کنید، کمی غیر طبیعی هست که هر سایزی که تصور میکنیم رو درست کنیم و قرار بدیم. البته امکانش هست که بصورت داینامیک و پویا سایز تصویر رو متناسب با شرایط تغییر سایز داد، اما زمانی که ما تصاویر رو تغییر سایز میدیم، سرور نیاز به زمان داره تا این کار رو برامون انجام بده و بهمین دلیل کمی طول میکشه تا تصویر به دست مرورگر برسه و نمایش داده بشه.

به همین دلیل بیشتر سایتها سایتهای بزرگ تصاویر خودشون رو بصورت Content Delivery Network یا CDN قرار میدن و اونا رو Cache میکنن. این کار میتونه در مقیاس خیلی بزرگ هزینه ی زیادی داشته باشه و برای هر کسی پیشنهاد نمیشه.

در انتها باید بگیم که مرورگر زمانی که شروع به دانلود تصویر میکنه، از سایز اون در صفحه اطلاعی نداره.

روشهای موجود برای انتخاب Breakpoint های تصاویر

همونطور که در ابتدا بحث Breakpoint ها گفته شد، راه حل کاملا مشخصی برای انتخاب تعداد منابعی که برای نمایش در صفحه احتیاج دارید، وجود نداره. در عوض در اینجا قصد داریم راه حل هایی متفاوتی که میتونین برای این مشکل کارایی داشته باشه رو توضیح بدیم.

تطابق با breakpoint های قالب و صفحتون

یک نفر در تیمتون میگه: "شما فکر میکنید چه تعداد منبع تصویر برای این محصول و سایت مورد نیاز هست؟"

شما لحظه ای فکر میکنید و جواب میدید: "سه عدد چطوره؟ کوچک، متوسط و بزرگ.

اگه همین جواب رو دادین جای نگرانی وجود نداره، چون تقریبا همه افرادی که بر روی واکنشگرا کردن تصاویر کار میکنن چنین جوابی رو خواهند داد.

شاید سازمان شما هنوز هم در مورد موبایل و تبلت و Desktop فکر میکنه و نظر داره که برای اونا تصاویر Small و medium و Large رو لود کنه و قرار بده. این راه خوبی هست و میتونه شما رو از اینکه بخاید برای بیشتر سایزهای معروف viewport یک تصویر جداگونه قرار بدین، خلاص کنه.

اما باید علاوه بر این فکرها، اصولی هم پشت قضیه و کارمون باشه.

تست کردن نماینده و نمونه هایی از تصاویر

ما میتونیم کل سایت و استایلهای تصاویر اون رو مطالعه کنیم و اطلاعات اون رو در بیاریم و بفهمیم که چه Breakpoint هایی نیاز هست. سخت ترین کار اینه که همون نماینده و نمونه رو از سایت پیدا کنید و با توجه به اون تصمیم گیری کنید. اگر سایت مورد نظر استایلهای متفاوتی برای هر تصویر مجزا در نظر نگرفته باشه و همه اونا به یک شکل باشن، میشه بصورت ساده نمونه گیری کرد و برای اون Breakpont مشخص کرد. اما اگر استایلهای متفاوتی وجود داشته باشه در بعضی از مواقع فرآیند نمونه گیری غیر ممکن خواهد بود.

استفاده Memory بر توزیع Breakpoint ها تاثیر دارد

چندی پیش Tim Kadlec فرآیند نمایش تصاویر در موبایلها رو مورد بررسی قرار داد و یک Presentation ارائه کرد. در بررسی که منتشر کرد او استفاده از Memory تصاویر انعطاف پذیر در طراحی واکنشگرا رو مورد آزمایش قرار داد.

چیزی که این شخص به اون پی برد این بود که هر چه تصویر بزرگتر میشه، مقداری که باید کاهش داده بشه بیشتر و بزرگتر هست. memory-usage

در مثال بالا، کاهش دادن سایز تصویر 600*600 پیکسل در هر دو جهت افقی و عمودی به اندازه 50 پیکسل باعث بوجود اومدن 230 هزار بایت حجم اضافی میشه و الکی اونا رو دانلود کردیم. اگر همین کار رو برای تصویر 200*200 پیکسل در نظر بگیریم و اون هم در هر جهت 50 پیکسل کاهش داده بشه، 70 هزار بایت فضای باطل و بیهوده رو لود میکنه.

دانستن این موضوع به ما بهتر میفهمونه که Breakpoint هامون رو چطوری انتخاب کنیم. ما باید هر چه تصویر بزرگتر میشه Breakpoint های بیشتری رو قرار بدیم تا بایتهای بیهوده دانلود نشن. more-breakpoints-at-large-sizes1

متاسفانه در حالیکه این روش به ما میگه که در سایزهای بزرگتر Breakpoint های بیشتری دارید، اما دقیقا نمیگه که این Breakpoint ها در کجا قرار دارن و چه عددی هستند.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 323 تاريخ: پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 6)

در این مطلب نمونه 6 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
css-hover

کد HTML :

<h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

107

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Rotate */

.hover06 figure img {

-webkit-transform: rotate(15deg) scale(1.4);

transform: rotate(15deg) scale(1.4);

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover06 figure:hover img {

-webkit-transform: rotate(0) scale(1);

transform: rotate(0) scale(1);

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 321 تاريخ: پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57

timber : دانلود رایگان مجموعه المنتهای وکتور و برداری

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون تعدادی المنت برداری و وکتور قرار داده شده و میتونین اونا رو بصورت رایگان دانلود کرده و استفاده کنید.

برای شروع وارد سایت timber بشین. timber

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 358 تاريخ: پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57

دوره مجازی سئو (جلسه 30): مطالب فصل آخر و جمع بندی دوره - جلسه آخر

0 3 ۲۷ اردیبهشت ۹۵

در این بخش که آخرین جلسه از دوره آموزش سئو هست به مطالب آخر فصل و همچنین جمع بندی مطالب دوره خواهیم پرداخت که دانشجویان نکات مهم دوره را بهتر درک کرده و در بهینه سازی سایت خود روی آنها تمرکز بیشتری داشته باشند. همچنین منابعی را در اخر این جلسه معرفی خواهیم کرد تا از جدیدترین مطالب مربوط به سئو باخبر شوند. مطالب مطرح شده در این جلسه عبارتند از :

مطالب فصل آخر دوره که مربوط به درست یا غلط برخی باورها در رابطه با سئو می باشد.
جمع بندی دوره
معرفی منابع
و...

* آموزش در حال رندر و آپلود می باشد

این مطلب یک جلسه از دوره آموزش جامع سئو و بهینه سازی سایت برای موتورهای جستجو است و برای دیدن آن باید در این دوره ثبت نام کنید .

توضیحات : Seo مخفف Search Engine Optimization به معنای بهینه سازی سایت برای موتور های جستجو می باشد. با توجه به درخواست های بالای کاربران ، مبنی بر برگزاری دوره سئو و همچنین نیاز به برگزاری یک دوره جامع برای آشنایی بیشتر وبمستران با بحث سئو ، برآن شدیم که یکی از دوره های سایت سون لرن را به مبحث SEO اختصاص دهیم. شما اگر بهترین برنامه نویس ، بهترین طراح رابط کاربری باشید و یا به طور کلی صاحب بهترین سایت هم که باشید ، تا زمانی که با بحث SEO آشنایی نداشته باشید نمیتوانید در سطح اینترنت خدمات ، کالا یا ... را به مخاطبانتان معرفی کنید یا به فروش برسانید. بنابرین سئو یک مبحث ضروری برای تمامی وبمستران و طراحان وب سایت می باشد که بایستی با آن آشنایی داشته باشند. متاسفانه بسیاری از طراحان وب و وبمسترها باورهای اشتباهی در رابطه با سئو دارند که باعث میشود این مبحث را یک چیز ساده یا برعکس یه چیز خیلی پیچیده بدانند. آیا میزان سئوی وب سایت خودتان رو براساس ابزار های آنالیز سئو تشخیص میدهید؟ آیا سئوی سایت خود را در طراحی قالب سایت خود می بینید؟ آیا سئوی سایت را در قرار دادن لینک خود در سایت های دیگر می بینید ؟ آیا سئو سایت را در نصب افزونه های موجود برای CMS های خود میدانید؟ بسیاری از سوالات این چنینی ممکن است ذهن شما را درگیر کرده باشد! در این دوره شما با پاسخ این سوالات و نحوه برخورد صحیح با آن ها آشنا خواهید شد. باید بدانید که سئو محدود به یک زمینه خاص نیست ، سئو ؛ ترکیبی از علم ، هنر و خلاقیت است. ما در این دوره سعی می کنیم به صورت جامع شما را با مفاهیم سئو به دور از اغراق و کاملا صادقانه آشنا کنیم تا خودتان بهینه ساز سایت خودتان باشید. امید است این دوره نیز برای شما دوستان گرامی مفید واقع گردد.

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 350 تاريخ: سه شنبه 28 ارديبهشت 1395 ساعت: 4:23

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 4)

در این مطلب نمونه 4 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
css-hover

کد HTML :

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Zoom Out #2 */

.hover04 figure img {

width: 400px;

height: auto;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover04 figure:hover img {

width: 300px;

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 309 تاريخ: سه شنبه 28 ارديبهشت 1395 ساعت: 4:23

mmxv : بهترین سایتهای سال از نظر طراحی

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بهترین وبسایتهای سال از نظر طراحی قرار داده شده و با کلیک بر روی هر ماه میتونین به اطلاعات اون دسترسی داشته باشید و با دیدن اونا ایده بگیرید.

برای شروع وارد سایت mmxv بشین. mmxv1

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 334 تاريخ: سه شنبه 28 ارديبهشت 1395 ساعت: 4:23

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 3)

در این مطلب نمونه 3 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
css-hover

کد HTML :

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

107

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Zoom Out #1 */

.hover03 figure img {

-webkit-transform: scale(1.5);

transform: scale(1.5);

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover03 figure:hover img {

-webkit-transform: scale(1);

transform: scale(1);

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 333 تاريخ: دوشنبه 27 ارديبهشت 1395 ساعت: 9:12

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 2)

در این مطلب نمونه 2 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
css-hover

کد HTML :

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Zoom In #2 */

.hover02 figure img {

width: 300px;

height: auto;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover02 figure:hover img {

width: 350px;

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 297 تاريخ: يکشنبه 26 ارديبهشت 1395 ساعت: 4:15

vertical-fixed-navigation-2 : ساخت منوی زیبای ثابت و عمودی

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک منو ثابت و عمودی که واکنشگرا هست رو میسازه و میتونین از اون استفاده کنید. میتونین بر روی دمو در لینک مورد نظر کلیک کنید، تا نتیجه کار رو ببینید.

برای شروع وارد سایت vertical-fixed-navigation-2 بشین. verticalfixednav

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 342 تاريخ: يکشنبه 26 ارديبهشت 1395 ساعت: 4:15

سون لرن • آموزش

آخرین مطالب

امکانات وب

واکنشگرا کردن تصاویر (جلسه 16) : تعاریف - Image Breakpoint - قسمت چهارم

واکنشگرا کردن تصاویر (جلسه 15) : تعاریف - Image Breakpoint - قسمت سوم

به چه دلیل سایز دقیق تصویر رو محیا نمیکنیم؟

روشهای موجود برای انتخاب Breakpoint های تصاویر

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 6)

timber : دانلود رایگان مجموعه المنتهای وکتور و برداری

دوره مجازی سئو (جلسه 30): مطالب فصل آخر و جمع بندی دوره - جلسه آخر

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 4)

mmxv : بهترین سایتهای سال از نظر طراحی

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 3)

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 2)

vertical-fixed-navigation-2 : ساخت منوی زیبای ثابت و عمودی

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه